<template>
  <div class="container">
    <div class="header">
      <a-typography-title
        :style="{ marginRight: 10, fontSize: '18px' }"
        :heading="5"
      >
        用户列表
      </a-typography-title>
    </div>
    <a-table :columns="columns" :data="data" class="table">
      <template #sex="{ record }">
        <span>{{ record.sex === 0 ? '男' : '女' }}</span>
      </template>
      <template #action="{ record }">
        <a-popconfirm
          content="确定删除吗?"
          ok-text="确实"
          cancel-text="取消"
          @ok="deleteUser(record.id)"
        >
          <a-button type="primary">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
  import { deleteUserInfo, getUserInfo } from '@/api/user';
  import { Message } from '@arco-design/web-vue';
  import { onMounted, ref } from 'vue';

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
    },
    {
      title: '姓名',
      dataIndex: 'nickname',
    },
    {
      title: '邮箱',
      dataIndex: 'mail',
    },
    {
      title: '性别',
      slotName: 'sex',
    },
    // {
    //   title: '操作',
    //   slotName: 'action',
    // },
  ];

  const data = ref([]);
  const fetchData = async () => {
    const res = await getUserInfo();
    if (res.code === 200) {
      data.value = res.data;
    }
  };

  onMounted(() => {
    fetchData();
  });

  const deleteUser = async (id: number) => {
    const res = await deleteUserInfo({ id });
    if (res.code === 200) {
      Message.success('删除成功');
      fetchData();
    }
  };
</script>

<style lang="less" scoped>
  .container {
    background-color: var(--color-fill-2);
    padding: 16px 20px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    .table {
      flex: 1;
    }
  }
</style>
